<template>
  <div class="content">
    <div class="breadcrumb" v-if="type">
      <el-breadcrumb separator="">
        <el-breadcrumb-item :to="{ name: 'logisticsIndex' }"
          ><div class="div1">
            返回首页
          </div></el-breadcrumb-item
        >
        <el-breadcrumb-item
          ><div class="div2">库存告急列表</div></el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="查询商品" name="1"></el-tab-pane>
      <el-tab-pane label="查询赠品" name="2"></el-tab-pane>
    </el-tabs>
    <div class="query">
      <div
        style="border-bottom:1px solid #eee;margin:10px;font-size:14px;color:#2d7edf;"
      >
        查询信息
      </div>
      <el-form ref="form" :model="queryForm" label-width="80px">
        <el-form-item class="formItem" label="产品名称">
          <el-input
            placeholder="请输入产品名称"
            v-model="queryForm.info"
          ></el-input>
        </el-form-item>
        <el-form-item class="formItem" label="选择品牌">
          <el-select
            v-model="queryForm.service"
            value-key="id"
            clearable
            placeholder="请选择品牌"
            default-first-option
            filterable
          >
            <el-option
              v-for="item in brand"
              :label="item.name"
              :value="item"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item class="formItem" label="产品编号">
          <el-input
            placeholder="请输入产品编号"
            v-model="queryForm.orderId"
          ></el-input>
        </el-form-item> -->
        <el-form-item class="formItem" label="商品仓库">
          <el-select
            clearable
            v-model="queryForm.warId"
            value-key="id"
            placeholder="请选择商品仓库"
            default-first-option
            filterable
          >
            <el-option
              v-for="item in op"
              :label="item.name"
              :value="item"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-button @click="submit" size="mini" type="primary">
          搜索
        </el-button>
      </el-form>
    </div>
    <div class="context">
      <el-table
        :data="tableData.goods.list"
        style="width: 100%"
        :header-cell-style="{ color: '#2E7EDF' }"
      >
        <el-table-column
          label="序号"
          width="50"
          type="index"
          key="1"
        ></el-table-column>
        <el-table-column label="商品图片" min-width="130" key="2">
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="img(scope.row.image)"
              fit="fit"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column
          key="3"
          show-overflow-tooltip
          prop="title"
          min-width="150"
          label="商品名称"
        >
        </el-table-column>
        <el-table-column
          prop="brandId"
          label="商品品牌"
          min-width="120"
          key="4"
        >
        </el-table-column>
        <el-table-column
          prop="sellPrice"
          label="商品单价"
          min-width="120"
          key="5"
        >
        </el-table-column>
        <el-table-column label="商品规格" min-width="120" key="6">
          <template slot-scope="scope">盒</template>
        </el-table-column>
        <el-table-column
          prop="quantityStock"
          min-width="120"
          label="商品库存"
          key="7"
        >
        </el-table-column>
        <!-- <el-table-column label="是否上架" width="160">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              active-color="#409EFF"
              inactive-color="#eee"
              :active-value="1"
              :inactive-value="0"
            >
            </el-switch>
          </template>
        </el-table-column> -->
        <el-table-column
          v-if="!type && tableData.goods"
          prop="updateTime"
          label="更新时间"
          min-width="180"
          key="8"
        >
        </el-table-column>
        <el-table-column fixed="right" label="操作" min-width="150" key="9">
          <template slot-scope="scope">
            <el-tooltip
              v-if="!type && tableData.goods"
              class="item"
              effect="dark"
              content="添加库存"
              placement="top-start"
              style="display: inline-block;"
            >
              <div
                @click="addInventory(scope.row)"
                style="font-size:30px;color:#2E7EDF;"
              >
                <i class="el-icon-shopping-cart-full"></i>
              </div>
            </el-tooltip>
            <el-tooltip
              v-if="
                type &&
                  tableData.goods &&
                  parArray.findIndex((e) => e === 'addStorage')
              "
              class="item"
              effect="dark"
              content="添加库存"
              placement="top-start"
              style="display: inline-block;"
            >
              <div
                @click="addInventory(scope.row)"
                style="font-size:30px;color:#2E7EDF;"
              >
                <i class="el-icon-edit-outline"></i>
              </div>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      :visible.sync="dialogFormVisible"
      :append-to-body="true"
      title="添加库存"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="活动名称">
          <el-input v-model="form.title" disabled></el-input>
        </el-form-item>
        <el-form-item label="选择仓库">
          <el-select
            v-model="form.warId"
            style="width: 100%;"
            value-key="id"
            clearable
            placeholder="请选择仓库"
            @change="selectClick"
          >
            <el-option
              v-for="items in JSON.parse(JSON.stringify(op))"
              :value="items"
              :key="items.id"
              :label="items.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <div class="wareHouse">
          <span v-for="(items, index) in form.warIds" :key="index">
            <el-form-item :label="items.name">
              <el-input
                v-model="items.quantityStock"
                placeholder="请输入商品库存"
              ></el-input>
            </el-form-item>
          </span>
        </div>
        <el-form-item label="采购单">
          <el-input
            v-model="form.oddNumber"
            placeholder="请输入采购单"
          ></el-input>
        </el-form-item>
        <el-form-item v-if="form.warId" label="仓库负责人" label-width="82px">
          <el-input
            disabled
            v-model="form.warId.keeper"
            placeholder="请输入仓库负责人"
          ></el-input>
        </el-form-item>
        <el-form-item label="采购人">
          <el-input
            v-model="form.receive"
            placeholder="请输入采购人"
          ></el-input>
        </el-form-item>
        <el-form-item style="display:flex;justify-content:flex-end;">
          <el-button type="primary" @click="addStorage">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <div v-if="tableData.goods" class="page">
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage1"
          :page-size="selectSizePage"
          layout="total,sizes,prev, pager, next"
          prev-text="上一页"
          next-text="下一页"
          :total="tableData.goods.totalNum"
        >
        </el-pagination>
      </div>
    </div>
    <div style="height:50px;"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogFormVisible: false,
      type: 0,
      currentPage1: 1,
      selectSizePage: 10,
      height: "500px",
      form: {
        warIds: [],
        warId: {},
      },
      activeName: "1",
      queryForm: {
        info: "",
        date: "",
        service: "",
        warId: "",
      },
      brand: [],
      op: [],
      tableData: {
        list: [],
        pageNo: 1,
        pageSize: 10,
      },
      parArray: [],
    };
  },
  created() {
    // 权限设定判断
    JSON.parse(sessionStorage.getItem("limit"))
      .buttonTreeDto.filter((item) => item.menuCode === "addStorageList")[0]
      .buttonList.forEach((item) => {
        this.parArray.push(item.code);
      });
  },
  activated() {
    this.type = 0;
    if (this.$route.query) {
      this.type = this.$route.query.type;
    }
    this.getList();
  },
  mounted() {
    let self = this;
    setTimeout(() => {
      let ph = document.documentElement.clientHeight;
      self.height = ph - 330 + "px";
    }, 1000);
    window.onresize = function() {
      let ph = document.documentElement.clientHeight;
      self.height = ph - 330 + "px";
    };
  },
  methods: {
    selectClose(e) {
      this.op.forEach((v) => (v.quantityStock = 0));
    },
    addStorage() {
      this.dialogFormVisible = false;
      let count = 0;
      for (let temp of this.form.warIds) {
        count += Number(temp.quantityStock);
        if (temp.id) {
          temp.warId = temp.id;
        }
        delete temp.createdTime;
        delete temp.id;
        delete temp.createdBy;
        delete temp.salesAuthorityIds;
        delete temp.sort;
        delete temp.updatedBy;
        delete temp.updatedTime;
      }

      this.$confirm("请谨慎是否添加库存", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.axios
            .post("/order/v1/purchase/addPurchase", {
              cid: this.form.id,
              godownOrder: this.form.godownOrder,
              handlerBy: this.form.handlerBy,
              number: count,
              oddNumber: this.form.oddNumber,
              receive: this.form.receive,
              type: Number(this.activeName),
              warIds: this.form.warIds,
              warKeeper: this.form.warKeeper,
            })
            .then((res) => {
              if (!res.code) {
                this.$message({
                  type: "success",
                  message: "成功",
                });
              } else {
                this.$message({
                  type: "warning",
                  message: res.message,
                });
              }

              this.getList();
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消!",
          });
        });
    },
    handleClick(e) {
      this.activeName = e.name;
      this.getList();
    },
    selectClick(e) {
      this.form.warIds = [];
      this.form.warIds[0] = e;
    },
    addInventory(e) {
      this.form = e;
      this.$forceUpdate();
      this.dialogFormVisible = true;
    },
    img(img) {
      return this.ImgHttps + img;
    },
    onSubmit() {
      this.getList(1);
    },
    toGoodsDetail() {},
    submit() {
      this.getList();
    },
    getList(e) {
      if (!e) {
        this.axios
          .get("/order/comm/commodity/selectCommWarehouse")
          .then((res) => {
            this.op = res.data;
          });

        this.axios.get("/order/comm/commodity/selectList").then((res) => {
          this.brand = res.data;
        });
      }
      if (this.type) {
        this.axios
          .post("/order/v1/LogisticsHome/warUrgency", {
            brandId: this.queryForm.service
              ? this.queryForm.service.id + ""
              : "",
            pageNo: this.currentPage1,
            pageSize: this.selectSizePage,
            startTime: this.queryForm.date[0],
            endTime: this.queryForm.date[1],
            title: this.queryForm.info,
            vender: this.queryForm.vender,
            warId: this.queryForm.warId ? this.queryForm.warId.id + "" : "",
            type: Number(this.activeName),
          })
          .then((res) => {
            // this.tableData.goods = res.data;
            this.$set(this.tableData, "goods", res.data);
            this.currentPage1 = res.data.pageNo;
          });
      } else {
        this.$set(this.tableData, "goods", { list: [] });
        this.axios
          .post("/order/v1/purchase/listPurchase", {
            brandId: this.queryForm.service
              ? this.queryForm.service.id + ""
              : "",
            pageNo: this.currentPage1,
            pageSize: this.selectSizePage,
            title: this.queryForm.info,
            type: Number(this.activeName),
            warId: this.queryForm.warId.warId,
          })
          .then((res) => {
            this.tableData.goods = res.data;
            if (res.data) {
              this.currentPage1 = res.data.pageNo;
            }
          });
      }
    },
    handleCurrentChange(e) {
      this.currentPage1 = e;
      this.getList(1);
    },
    handleSizeChange(e) {
      this.selectSizePage = e;
      this.getList(1);
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  font-size: 15px !important;
  /deep/.el-tabs__header {
    margin: 0;
    background: #fff;
  }
  .div1 {
    margin-left: -16px;
    background: url(../../../../assets/breadcrumb2.png);
    width: 120px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #2d7edf;
  }
  .div2 {
    margin-left: -16px;
    background: url(../../../../assets/breadcrumb1.png);
    width: 120px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #fff;
  }
  /deep/.el-table td,
  .el-table th {
    text-align: center;
  }
  /deep/ .el-table th > .cell {
    text-align: center;
    color: rgb(45, 125, 223);
    font-size: 15px;
  }
  /deep/.el-table__row:hover {
    color: rgb(45, 125, 223);
  }
  /deep/.el-button {
    padding: 0px;
    height: 30px;
    width: 80px;
  }
  .query {
    background: #fff;
    padding: 10px;
    margin-bottom: 1px;
    .formItem {
      display: inline-block;
      margin-right: 20px;
    }
    /deep/.el-input > input {
      height: 30px;
      width: 150px;
    }
  }
  .context {
    background: #fff;
    padding: 10px;
  }
  .page {
    text-align: right;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: -33px;
    background: #eee;
    z-index: 200;
    span {
      font-size: 15px;
      color: #666;
      display: inline-block;
      margin-left: 10px;
      vertical-align: middle;
    }
    .el-pagination {
      display: inline-block;
      vertical-align: middle;
    }
  }
}
</style>
